// This example of a pie chart comes from https://gist.github.com/1203641/273211a467659eca18080b150ef4808f60b2846f
// This file was created by Chris Lewis
// This file was edited by Chris Lewis and Sam Burich on 9/15/2011
// Most of the comments in this file are from the original authors.
var w = 200,                        //width
    h = 200,                        //height
    r = 100,                        //radius
//Custom colors for the corn pie chart.
color = d3.scale.ordinal().range(["#FF8C00", "#FFD700", "#FFFF00", "#FFEFD5"]);    

data = [{"label":"Corn 1", "value":20}, 
        {"label":"Corn 2", "value":25}, 
        {"label":"Corn 3", "value":30},
        {"label":"Corn 4", "value":25}];
// svg = Scalable Vector Graphics
var vis = d3.select("body")
    	    .select("#pie_canvas")  
        	.append("svg:svg")   //create the SVG element inside the pie_canvas
        	.data([data])        //associate our data with the document
            .attr("width", w+150)//set the width and height of our visualization (these will be attributes of the <svg> tag
            .attr("height", h)
        	.append("svg:g")     //make a group to hold our pie chart
        	
        						 
            .attr("transform", "translate(" + (r+150) + "," + r + ")") //move the center of the pie chart from 0, 0 to radius+150, radius

var arc = d3.svg.arc()           //this will create <path> elements for us using arc data
            .outerRadius(r);

var pie = d3.layout.pie()        						//this will create arc data for us given  a list of values
            .value(function(d) { return d.value; });    //we must tell it out to access the value of each element in our data array

var arcs = vis.selectAll("g.slice")     
        	  .data(pie)        		  //associate the generated pie data (an array of arcs, each having startAngle, endAngle and value properties) 
              .enter()                     
              .append("svg:g")   		  //create a group to hold each slice (we will have a <path> and a <text> element associated with each slice)
              .attr("class", "slice");    //allow us to style things in the slices (like text)

arcs.append("svg:path")
    .attr("fill", function(d, i) { return color(i); } ) //set the color for each slice to be chosen from the color function defined above
    .attr("d", arc);                                    //this creates the actual SVG path using the associated data (pie) with the arc drawing function

arcs.append("svg:text")                                 //add a label to each slice
    .attr("transform", function(d) {                    //set the label's origin to the center of the arc
        //we have to make sure to set these before calling arc.centroid
		d.innerRadius = 0;
		d.outerRadius = r;
        return "translate(" + arc.centroid(d) + ")";        //this gives us a pair of coordinates like [50, 50]
    })
    .attr("text-anchor", "middle")                          //center the text on it's origin
    .text(function(d, i) { return data[i].label; });        //get the label from our original data array
        